<template>
  <div class="login">
    <Header title="会员登录" class="active"></Header>
    <img src="@/assets/icons/logo.png" alt="" />
    <van-form>
      <van-field
        v-model="loginform.username"
        name="username"
        label="用户名:"
        placeholder="请输入邮箱/手机号码"
        :rules="[
          {
            required: true,
            message: '请填写用户名',
            pattern
          }
        ]"
      />
      <van-field
        v-model="loginform.password"
        type="password"
        name="password"
        label="密码:"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="Submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="login_tit">
      <router-link to="/reg"> 免费注册</router-link>
      <router-link to="/reg"> 忘记密码</router-link>
    </div>
    <Footer :active="active"></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      active: 3,
      loginform: {
        username: "15755122046",
        password: "123456"
      },
      pattern: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$|^1(3|4|5|6|7|8|9)\d{9}$/
    };
  },
  methods: {
    //   点击登录
    async Submit() {
      // 发送请求
      let res = await this.$axios.post("User/login", this.loginform);
      if (res.data.status !== 1)
        return this.$notify({ type: "danger", message: res.data.msg });
      this.$notify({ type: "success", message: "登录成功" });

      // 本地存储
      sessionStorage.setItem("userinfo", JSON.stringify(res.data.result));
      this.$router.push("/");
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  .footer {
    margin-top: 494px;
  }
  img {
    margin-top: 80px;
    margin-bottom: 102px;
    transform: translateX(50%);
    width: 352px;
    height: 78px;
  }
  .van-button--round {
    border-radius: 0;
    margin-top: 96px;
    border: 0;
    background-color: #ff4f02;
  }

  .login_tit {
    padding: 0 38px;
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    a {
      color: #5790bb;
    }
  }
}
</style>
